<template>
  <div class="image-uploader">
    <!-- <div class="header">
      上传图片
      <span class="tip">（最多上传{{picture_num}}张）</span>
    </div> -->
    <ul class="image-list clearfix">
      <li class="image-item"
          v-for="(item, index) in img_arr"
          :key="index">
        <img :src="baseUrl+item"
             class="image">
        <span class="del"
              @click="del_image(index)">×</span>
      </li>
      <li v-if="img_arr.length<picture_num"
          class="image-item"
          @tap="choose_image()">
        <p class="icon">+</p>
        <p class="msg">点击添加图片</p>
      </li>
    </ul>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import delPhoto from "@/assets/js/delPhoto.js";
export default {
  data () {
    return {
      baseUrl: common.image_response,
      img_arr: []
    };
  },
  props: {
    picture_num: 0
  },
  methods: {
    /**
     * 图片上传组件，父组件调用时需要传入参数：picture_num（图片上传的数量）;
     * 子组件上传后通过$emait把上传得到的json传值给父组件;
     * 父组件通过绑定回调getmsg(回调名称固定))接收，可参考scroing_goods.vue以及feedback.vue
     *by Steve.Du   ---- >  Q$A
     */
    //选择照片
    choose_image () {
      let that = this;
      wx.chooseImage({
        count: that.picture_num - that.img_arr.length,
        sizeType: ["compressed"],
        success (res) {
          wx.showLoading({
            title: "上传中...", //提示的内容,
            mask: true //显示透明蒙层，防止触摸穿透,
          });
          res.tempFilePaths.forEach(item => {
            wx.uploadFile({
              url: common.base_url + "api/v4_5/upload",
              filePath: item,
              name: "file",
              formData: {
                dirPath: "authentication",
                upload_status: true
              },
              header: {},
              success: res => {
                wx.hideLoading();
                let result = JSON.parse(res.data);
                wx.showToast({
                  title: "图片上传成功", //提示的内容,
                  icon: "none", //图标,
                  duration: 2000, //延迟时间,
                  mask: false //显示透明蒙层，防止触摸穿透
                });
                let arr = [...that.img_arr];
                arr.push(result.data.url);
                that.img_arr = arr;
                that.$emit('getmsg', arr);
              },
              fail: () => {
                wx.hideLoading();
                wx.showToast({
                  title: "图片上传失败", //提示的内容,
                  icon: "none", //图标,
                  duration: 2000, //延迟时间,
                  mask: true //显示透明蒙层，防止触摸穿透
                });
              }
            });
          });
        },
        fail () {
          wx.hideLoading();
          wx.showToast({
            title: "图片选取失败", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true //显示透明蒙层，防止触摸穿透
          });
        }
      });
    },
    del_image (index) {
      let that = this;
      delPhoto(that.img_arr[index])
      let arr = [...that.img_arr];
      delPhoto(that.img_arr[index])
      arr.splice(index, 1);
      that.img_arr = arr;
      that.$emit('getmsg', arr);
    }
  },
  onLoad () {
    this.img_arr = [];
  },
  onShow () {
    // this.img_arr = [];
  }
};
</script>

<style lang="less" scoped>
.image-uploader {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 0px 0px rgba(204, 204, 204, 0.5);
  // margin-top: 10px;
  padding-bottom: 14px;
  // margin-bottom: 60px;
  .header {
    line-height: 44px;
    padding-left: 15px;
    font-size: 14px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    .tip {
      font-size: 12px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
  .image-list {
    margin-left: 15px;
    .image-item {
      width: 100px;
      height: 100px;
      border: 1px dashed rgba(204, 204, 204, 1);
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      // overflow: hidden;
      position: relative;
      .image {
        width: 104px;
        height: 104px;
      }
      .del {
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.49);
        border-radius: 50%;
        color: #888;
        position: absolute;
        right: -5%;
        top: -9%;
        font-size: 20px;
        line-height: 20px;
        text-align: center;
        z-index: 9999;
      }
      .icon {
        font-size: 26px;
        color: rgba(204, 204, 204, 1);
        text-align: center;
        margin-top: 18px;
      }
      .msg {
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(204, 204, 204, 1);
      }
    }
  }
}
</style>


